<template>
  <div class="recommand_wrap">
    <div class="text_wrap clearfix">
      <div class="recommand_title">
        <slot name="topic"></slot>
      </div>
      <div class="more">更多</div>
    </div>
    <slot name="songList" :data="myList">
      <div class="song_list">
        <div class="song_item" v-for="each in myList" :key="each.id" @click="handleItem(each.id)">
          <div>
            <img :src="each.coverImgUrl" alt="" />
          </div>
          <div class="item_desc">
            {{ each.description }}
          </div>
        </div>
      </div>
    </slot>
  </div>
</template>

<script>
import {getMusicList} from '@/http/Home/home.js'
export default {
  props: ["list"],
  mounted() {
    console.log("zxcxacxz");
    console.log(this.myList);
  },
  data() {
    return {
      myList: this.list,
    };
  },
  methods: {
     async handleItem(id){
        // let res = await getMusicList({id});
        this.$router.push({name:'SongList',query:{id}})
      }
  },
  watch: {
    list(val) {
      this.myList = val;
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../assets/public/common.less");
@import url("../assets/Home-list/index.less");
</style>